<template>
  <div id="workShop">
    <div class="workshop-lf">
      <div class="punch-item emsTable">
        <div v-for="(item, index) in punchList" :key="index" class="for-block">
          <div class="name-num" @click="item.name ? punchNav(item, index) : ''" :class="[{activeClass: item.name===activePunch && item.name}, activeChild && item.name != '' ? 'unActiveClass' : '']">
            <span><Icon @click.native.stop="clickAddIcon(item, index)" style="padding-right: 16px;" v-show="(item.name===activePunch && item.children.length > 0)" :type=" item.flag ? 'ios-remove-circle-outline' : 'ios-add-circle-outline'"/>{{item.name}}</span>
            <!--              <span>{{item.value}} <em>{{item.unit}}</em></span>-->
          </div>
          <div class="sub-list" v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="punchChild(item, subItem, subIndex)" v-show="item.flag">
            <div class="sub-item" :class="{activeChildClass: subItem.name===activeChild}">
              <span>{{subItem.name}}</span>
              <!--                <span>{{subItem.value}}<em>{{subItem.unit}}</em></span>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="workshop-rt">
      <div class="work-energy-trend">
        <div class="header-title font24">
          <div class="title-line"></div>
          <span class="chart-title">能耗走势<em>({{workEnergyObj.title}})</em><span style="margin-left: 10px; font-size: 18px;">{{unit}}</span></span>
        </div>
        <div class="trendChart" id="trendChart" ref="trendChart"></div>
      </div>
      <div class="work-bottom">
        <div class="work-past-com">
          <div class="header-title font24">
            <div class="title-line"></div>
            <span class="chart-title">过往对比<span style="margin-left: 10px; font-size: 18px;">{{unit}}</span></span>
          </div>
          <div class="work-past" id="work-past-chart" ref="workPastChart"></div>
        </div>
        <div class="work-rank">
          <div class="header-title font24">
            <div class="title-line"></div>
            <span class="chart-title">占总量比例/排名 <span style="margin-left: 10px; font-size: 18px;">{{unit}}</span></span>
          </div>
          <div class="rank-content">
            <div class="rank-situation">
              <div>
                <span><img class="icon-img" src="../../../assets/newEms/icon_flag_green.png"/>排名情况：</span>
                <p>{{selectRenderChart.rank}}</p>
              </div>
              <div>
                <span><img class="icon-img" src="../../../assets/newEms/sm_devices.png"/>涨幅程度：</span>
                <p>{{selectRenderChart.increase}}<Icon :type="selectRenderChart.increase == 0 ? 'md-remove' : (selectRenderChart.increase < 0 )? 'md-arrow-down' : 'md-arrow-up'" size="20" :color="selectRenderChart.increase > 0 ? '#57CFBF' : '#E66770'"/></p>
              </div>
            </div>
            <div class="rankPie"><div id="rankPieChart" ref="rankChart" class="rankPieChart"></div></div>
            <div class="gross">
              <div class="sele-value">{{selectRenderChart.value}} <span>{{selectRenderChart.unit}}</span></div>
              <div class="rank-big-num"><span class="per-color">{{selectedPer}}<em>%</em></span><div class="num-line"></div><div class="rank-text">{{selectRenderChart.name}}</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ems-back></ems-back>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import EmsBack from '../../../components/common/emsBack'
  import {mapState} from 'vuex'
  import emsId from '@/api/emsId'
  import {timerFun} from '@/components/common/mixin/tools'
  export default {
    // 组件的名称
    name: 'workShop',
    // props 可以是数组或对象，用于接收来自父组件的数据
    props: {},
    // 数据绑定
    data () {
      return {
        // 是否激活
        activePunch: '',
        // 下拉列表中激活的
        activeChild: '',
        // 左侧冲压线数组
        punchList: [],
        // 走势图
        unit: '',
        workEnergyObj: {
          title: '',
          xData: [],
          yLeft: []
        },
        // 过往对比
        workPastComObj: {
          data: [],
          dataYear: [],
          name: ''
        },
        // 左侧选中的数据
        selectRenderChart: {},
        // 选中所占的百分比 selectedPercent
        selectedPer: 0,
        // 定时器
        workShopTimer: null
      }
    },
    // 计算属性
    computed: {
      ...mapState('newEms', {
        navActive: state => state.navActive,
        workSpaceName: state => state.workSpaceName,
        valueList: state => state.valueList,
        activeDate: state => state.activeDate
      })
    },
    // 组件
    components: {EmsBack},
    // 注意，不应该使用箭头函数来定义 methods函数 或者  computed函数 (例如 aDouble: () => this.a * 2)。
    // 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined
    // 方法
    methods: {
      // 刷新数据
      refreshData () {
        // 请求的要携带的参数
        let params = {
          time: this.activeDate,
          workSpaceName: this.workSpaceName,
          name: this.navActive
        }
        // 异步问题
        this.asyncGetPunchData(params)
      },
      // 9月29日 解决异步问题
      async asyncGetPunchData (params) {
        await this.getPunchData(params).then(res => {
          // 给返回来的数组添加一个flag字段 值设为false
          this.punchList = res.map(item => {
            return {...item, flag: false}
          })
          // 当数据小于8个的时候，用阴影补够8个
          if (this.punchList.length < 8) {
            let data = this.punchList
            let index = data.length
            // 占位
            let obj = {name: '', value: '', unit: '', flag: false, rank: '', increase: '', children: []}
            let punchNavArr = Array.from(Array(8 - index), (v, k) => k)
            this.punchList = data.concat(punchNavArr).fill(obj, index)
            if (this.punchList[0].name) {
              this.activePunch = this.punchList[0].name
              this.activeChild = ''
              this.selectRenderChart = this.punchList[0]
              // 取出返回的数组里面的每个value值
              let amountsArr = this.punchList.map(item => {
                return item.value
              })
              // 计算总和
              let totalNum = amountsArr.reduce((accumulator, currentValue) => {
                return accumulator + currentValue
              })
              totalNum = parseInt(totalNum)
              this.selectedPer = totalNum > 0 ? ((this.punchList[0].value / totalNum) * 100).toFixed(2) : '0.00'
              // 调用图表
              this.rankChart(this.punchList, this.activePunch)
              this.refreshWorkEnergyData(this.activePunch)
            }
          } else {
            // 默认第一个为选中高亮的状态
            this.activePunch = this.punchList[0].name
            this.activeChild = ''
            this.selectRenderChart = res[0]
            // 取出返回的数组里面的每个value值
            let amountsArr = res.map(item => {
              return item.value
            })
            // 计算总和
            let totalNum = amountsArr.reduce((accumulator, currentValue) => {
              return accumulator + currentValue
            })
            // 计算占比
            this.selectedPer = totalNum > 0 ? ((this.punchList[0].value / totalNum) * 100).toFixed(2) : '0.00'
            // 调用图表
            this.rankChart(this.punchList, this.activePunch)
            this.refreshWorkEnergyData(this.activePunch)
          }
        })
      },
      refreshWorkEnergyData (workSpaceName) {
        // 请求的要携带的参数
        let params = {
          time: this.activeDate,
          workSpaceName: workSpaceName,
          name: this.navActive
        }
        this.workEnergyData({...params, id: emsId['workEnergyId']})
        this.getPastCom({...params, id: emsId['workPastComId']})
      },
      // 左边的列表数据
      getPunchData (params) {
        return window.myapi.workShopList(params).then(res => {
          // console.log(res)
          if (res.data.status === 200) {
            return res.data.data
          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
      // 能源走势
      workEnergyData (obj = {}) {
        new window.Api(obj, 'POST').getData().then(res => {
          if (res.data.status === 200) {
            console.log(res.data.jsData)
            this.workEnergyObj = res.data.jsData
            let str = this.workEnergyObj.title
            // console.log(str)
            this.unit = res.data.jsData.unit
            // console.log(this.unit)
            this.workEnergyObj.title = str.substring(str.length - 3, str.length - 1)
            // console.log('能源走势', this.workEnergyObj)
            this.trendChart(this.workEnergyObj)
          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
      // 车间的过往对比数据
      getPastCom (obj = {}) {
        new window.Api(obj, 'POST').getData().then(res => {
          // console.log(res)
          if (res.data.status === 200) {
            this.workPastComObj = res.data.jsData
            // console.log('过往对比数据', this.workPastComObj)
            this.workPastCharts(this.workPastComObj)
          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
      // 点击左边的冲压线体
      punchNav (item, index) {
        if (this.activePunch === item.name) return false
        this.activePunch = item.name
        if (item.flag === true) return false
        this.punchList = this.punchList.map(item => {
          return {...item, flag: false}
        })
        this.activeChild = ''
        this.selectRenderChart = item
        this.rankChart(this.punchList, this.activePunch)
        this.refreshWorkEnergyData(this.activePunch)
        // 取出数组里面的所有value值
        let amountsArr = this.punchList.map(item => {
          return item.value
        })
        // 计算value的总和
        let totalNum = amountsArr.reduce((accumulator, currentValue) => {
          return accumulator + currentValue
        })
        // 计算选中的在总和的占比
        // 处理小数 保留两位小数点
        this.selectedPer = totalNum > 0 ? ((item.value / totalNum) * 100).toFixed(2) : '0.00'
        // this.selectedPer = Math.floor(selectedPer * 100) / 100
      },
      clickAddIcon (item, index) {
        if (this.activePunch === item.name && item.children.length > 0) {
          item.flag = !item.flag
        }
        // if (item.flag) {
        //   this.activeChild = item.children[0].name
        //   this.selectRenderChart = item.children[0]
        //   this.rankChart(item.children, this.activeChild)
        // } else {
        //   this.selectRenderChart = item
        //   this.activePunch = item.name
        //   this.rankChart(this.punchList, this.activePunch)
        // }
        // 当下拉的子级收起来的时候 即flag为false就显示当前选中
        if (!item.flag) {
          this.activeChild = ''
          this.selectRenderChart = item
          this.activePunch = item.name
          this.rankChart(this.punchList, this.activePunch)
          // 9月29日 新 异步更新 图表
          this.refreshWorkEnergyData(this.activePunch)
          // 取出数组里面的所有value值
          let amountsArr = this.punchList.map(item => {
            return item.value
          })
          // 计算value的总和
          let totalNum = amountsArr.reduce((accumulator, currentValue) => {
            return accumulator + currentValue
          })
          // 计算选中的在总和的占比
          // 处理小数 保留两位小数点
          this.selectedPer = totalNum > 0 ? ((item.value / totalNum) * 100).toFixed(2) : '0.00'
        }
      },
      // 点击下拉列表
      punchChild (item, subItem, subIndex) {
        if (this.activeChild === subItem.name) return false
        this.activeChild = subItem.name
        this.selectRenderChart = subItem
        this.rankChart(item.children, this.activeChild)
        this.refreshWorkEnergyData(this.activeChild)
        // 取出数组里面的所有value值
        let amountsArr = item.children.map(item => {
          return item.value
        })
        // console.log(amountsArr)
        // 计算value的总和
        let totalNum = amountsArr.reduce((accumulator, currentValue) => {
          return accumulator + currentValue
        })
        // 计算选中的在总和的占比 处理小数 保留两位小数点
        this.selectedPer = totalNum > 0 ? ((subItem.value / totalNum) * 100).toFixed(2) : '0.00'
        // this.selectedPer = Math.floor(selectedPer * 100) / 100
      },
      // 能源走势图表
      trendChart (energyTrendObj) {
        let dom = this.$refs.trendChart
        let myChart = echarts.init(dom)
        let option = {
          color: ['#14CAFF'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 鼠标移入图标区域的线条
              type: 'line'
            }
          },
          grid: {
            left: '3%',
            right: '3%',
            // bottom: '0%',
            top: '10%',
            containLabel: true
          },
          xAxis: {
            boundaryGap: false,
            axisTick: {
              show: false
              // length: 10,
              // alignWithLabel: true,
              // lineStyle: {
              //   color: '#8C99B6'
              // }
            },
            type: 'category',
            splitLine: { // 坐标轴在 grid 区域中的分隔线。
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#8C99B6'],
                opacity: 0.1
              }
            },
            axisLabel: {
              color: '#8fa6e2',
              opacity: 0.1,
              fontSize: 14,
              margin: 20
              // formatter: (value, index) => {
              //   console.log(index)
              // }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8C99B6',
                opacity: 0.1
              }
            },
            data: Array.from(Array(12), (v, k) => {
              if (k < 9) return '0' + (k + 1)
              return '' + (k + 1)
            })
          },
          dataZoom: [
            {
              type: 'inside'
            },
            {
              textStyle: {
                color: '#fff'
              },
              fillerColor: '#146eff',
              borderColor: '#0092fe',
              height: 22,
              handleStyle: {
                color: '#0092fe'
              }
            }],
          yAxis: [
            {
              name: '',
              type: 'value',
              boundaryGap: ['0%', '40%'],
              axisLabel: {
                color: '#8fa6e2',
                opacity: 0.1,
                fontSize: 14,
                inside: false,
                margin: 60,
                show: true,
                formatter: (value) => {
                  if (value >= 10000 && value < 10000000) {
                    value = value / 10000 + '万'
                  } else if (value >= 10000000 && value < 100000000) {
                    value = value / 10000000 + '千万'
                  } else if (value >= 100000000) {
                    value = value / 100000000 + '亿'
                  }
                  return value
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#8C99B6',
                  opacity: 0.1
                }
              },
              splitLine: { // 坐标轴在 grid 区域中的分隔线。
                show: true,
                lineStyle: {
                  // 使用深浅的间隔色
                  color: ['#8C99B6'],
                  opacity: 0.1
                }
              },
              axisTick: {
                show: false
              }
            }
          ],
          series: [
            {
              name: energyTrendObj.title + '量',
              type: 'line',
              data: [1, 8, 2, 65, 753, 23, 0],
              smooth: true,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1, [{
                      offset: 0,
                      // color: '#64B2ED'
                      color: '#14CAFF'
                    },
                      {
                        offset: 0.56,
                        color: 'rgba(100,178,237,0.4)',
                        opacity: 0.1
                      },
                      {
                        offset: 1,
                        color: 'rgba(100,178,237,0.1)',
                        opacity: 0.1
                      }
                    ]
                  )
                }
                // color: '#57c5f7',
                // opacity: 0.1
              },
              // showSymbol: false, //当鼠标移入时才显示移入那个区域的小圆点
              symbol: 'circle',
              symbolSize: 6, // 拐点圆的大小
              itemStyle: {
                normal: {
                  color: '#57c5f7', // 拐点圆的颜色
                  borderColor: '#57c5f7', // 拐点边框颜色
                  lineStyle: { // 线的样式
                    // width: 2,
                    type: 'solid' // 'dotted'为虚线，'solid'为实线
                  }
                },
                emphasis: {
                  color: '#57c5f7',
                  borderColor: '#fff'
                  // lineStyle: { // 系列级个性化折线样式
                  //   // width: 0.5,
                  //   type: 'dotted',
                  //   color: '#57c5f7' // 折线的颜色
                  // }
                }
              },
              markPoint: {
                // symbol: 'rect', // 长方形
                // symbolSize: 40, // 拐点圆的大小
                // symbolOffset: [0, '-70%'],
                // data: [
                //   {type: 'max', name: '最大值'},
                //   // {type: 'min', name: '最小值'}
                // ]
              }
            }
          ]
        }
        option.xAxis.data = energyTrendObj.xData
        option.series[0].data = energyTrendObj.yLeft
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        }
      },
      // 过往对比 柱状图
      workPastCharts (pastCompareObj) {
        let dom = this.$refs.workPastChart
        let myChart = echarts.init(dom)
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            }
          },
          grid: {
            top: '10%',
            bottom: '10%',
            right: '6%',
            left: '6%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisTick: {
              show: false
            },
            splitLine: { // 坐标轴在 grid 区域中的分隔线。
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#8C99B6'],
                opacity: 0.1
              }
            },
            // x轴颜色
            axisLine: {
              lineStyle: {
                color: '#8C99B6',
                opacity: 0.1
              }
            },
            axisLabel: {
              color: '#8fa6e2',
              opacity: 0.1,
              fontSize: 12,
              margin: 10,
              formatter: (value) => {
                if (value >= 10000 && value < 10000000) {
                  value = value / 10000 + '万'
                } else if (value >= 10000000 && value < 100000000) {
                  value = value / 10000000 + '千万'
                } else if (value >= 100000000) {
                  value = value / 100000000 + '亿'
                }
                return value
              }
            }
          },
          yAxis: {
            splitLine: { // 坐标轴在 grid 区域中的分隔线。
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#8C99B6'],
                opacity: 0.1
              }
            },
            type: 'category',
            data: ['2015', '2016', '2017', '2018', '2019'],
            axisTick: {
              show: false
            },
            // y轴颜色
            axisLine: {
              lineStyle: {
                color: '#8C99B6',
                opacity: 0.1
              }
            },
            axisLabel: {
              color: '#8fa6e2',
              opacity: 0.1,
              fontSize: 12,
              margin: 10
            }
          },
          series: [
            {
              name: '',
              type: 'bar',
              data: [2000, 5971, 3649, 1023, 3210],
              // barWidth: 20, // 柱图宽度
              itemStyle: {
                normal: {
                  // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                  color: function (params) {
                    var colorList = ['#11D6A2', '#FFAD00', '#FF692F', '#14CAFF'] // '#90A9F0',
                    return colorList[params.dataIndex]
                  },
                  label: {
                    show: false, // 开启显示
                    position: 'right', // 在上方显示
                    textStyle: { // 数值样式
                      color: function (params) {
                        var colorList = ['#90A9F0', '#11D6A2', '#FFAD00', '#FF692F', '#14CAFF']
                        return colorList[params.dataIndex]
                      },
                      fontSize: 14,
                      fontWeight: 'bold'
                    }
                  }
                }
              }
            }
          ]
        }
        option.yAxis.data = pastCompareObj.dataYear
        option.series[0] = {...option.series[0], ...pastCompareObj}
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        }
      },
      // 占比饼状图
      rankChart (arrData = [], selectActive = '') {
        let dom = this.$refs.rankChart
        let myChart = echarts.init(dom)
        let option = {
          tooltip: {
            show: false,
            trigger: 'item',
            formatter: '{b} : <br/> {c} ({d}%)'
          },
          // visualMap: {
          //   show: false,
          //   min: 80,
          //   max: 600,
          //   inRange: {
          //     colorLightness: [0, 0.7]
          //   }
          // },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '80%', // 设置饼图的大小
              center: ['50%', '45%'], // 设置饼图的位置
              // avoidLabelOverlap: false,
              data: [ // 数据
                {value: 1350, name: '邮件营销', itemStyle: {color: '#ABB9DC', borderWidth: 4, borderColor: '#103ebe', opacity: 0.28}},
                {value: 360, name: '直接访问', itemStyle: {color: '#ABB9DC', borderWidth: 4, borderColor: '#103ebe', opacity: 0.32}},
                {value: 340, name: '邮件营销', itemStyle: {color: '#ABB9DC', borderWidth: 4, borderColor: '#103ebe', opacity: 0.22}},
                {value: 324, name: '联盟广告', itemStyle: {color: '#ABB9DC', borderWidth: 4, borderColor: '#103ebe', opacity: 0.2}},
                {value: 300, name: '视频广告', itemStyle: {color: '#ABB9DC', borderWidth: 4, borderColor: '#103ebe', opacity: 0.15}},
                {value: 380, name: '搜索引擎', itemStyle: {color: '#ABB9DC', borderWidth: 4, borderColor: '#103ebe', opacity: 0.4}},
                {value: 284, name: '联盟广告', itemStyle: {color: '#ABB9DC', borderWidth: 4, borderColor: '#103ebe', opacity: 0.21}},
                {value: 400}
              ].sort(function (a, b) { return a.value - b.value }),
              // roseType: 'radius',
              label: {
                normal: {
                  show: false,
                  textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: {
                    type: 'radial',
                    x: 2,
                    y: 2,
                    r: 3,
                    colorStops: [{
                      offset: 0, color: 'transparent' // 0% 处的颜色
                    }, {
                      offset: 0.2, color: 'rgba(20, 78, 208, 0.2)' // 100% 处的颜色
                      // offset: 1, color: '#11D6A2' // 100% 处的颜色
                    }, {
                      offset: 1, color: 'rgba(17,214,162,1)' // 0% 处的颜色
                    }],
                    global: false // 缺省为 false
                  },
                  borderWidth: 2,
                  borderColor: 'rgba(17, 67, 196, 0.1)'
                  // shadowBlur: 200,
                  // shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                emphasis: {
                  show: false
                }
              },

              animationType: 'scale',
              animationEasing: 'elasticOut',
              animation: false, // 去掉鼠标移入就放大的效果 // hoverAnimation: false,
              animationDelay: function (idx) {
                return Math.random() * 200
              }
            }
          ]
        }
        let seriesData = arrData.map((item, index) => {
          let obj = {}
          if (item.name === selectActive) {
            obj = {...item, selected: true}
          } else {
            if (arrData.length < 8) {
              obj = { ...item, ...{ itemStyle: { color: '#8fa6e2', borderWidth: 2, borderColor: '#103ebe', opacity: (0.8 - 0.1 * index) > 0 ? (0.8 - 0.1 * index) : 0.1 } } }
            } else {
              obj = { ...item, ...{ itemStyle: {color: '#8fa6e2', borderWidth: 2, borderColor: '#103ebe', opacity: (0.9 - 0.05 * index) > 0 ? (0.9 - 0.05 * index) : 0.1} } }
            }
          }
          return obj
        })
        option.series[0].data = seriesData.sort(function (a, b) { return a.value - b.value })
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        }
      }
    },
    // 监听
    watch: {
      // 监听路由变化
    },
    // 常用钩子函数，总共有8个，可以参照vue的生命周期看
    // 完成了 data 数据的初始化，el没有，就是说页面的dom没有完成转化，还是 {{data}} 这种
    created () {
    },
    // 完成挂载，相当于dom ready
    mounted () {
      this.refreshData()
      // 定时器 五分钟定时请求一次数据
      timerFun(this, 'workShopTimer', 'refreshData', 300000)
    },
    // 销毁，可以做一些定时器的销毁,缓存的清除等操作
    destroyed () {
      clearTimeout(this.workShopTimer)
    }
  }
</script>

<style lang="scss" scoped='scoped'>
  #workShop {
    position: relative;
    @media screen and (min-width: 1921px) {
      .punch-item {
        height: 1000px!important;
        .name-num {
          height: 106px!important;
        }
        .activeClass{
          height: 140px!important;
        }
      }
      #trendChart {
        height: 700px;
        width: 1800px;
      }
      #work-past-chart {
        width: 510px;
        height: 270px;
      }
      .rankPie {
        width: 605px!important;
        #rankPieChart {
          width: 560px;
          height: 300px;
          margin: 0 auto;
        }
      }
    }
    font-family: PingFang-SC;
    height: 100%;
    padding: 20px;
    display: flex;
    .workshop-lf {
      flex: 0 0 20%;
      padding-top: 46px;
      height: 100%;
      background: $sbgc;
      margin-right: 20px;
      .punch-item {
        .for-block:nth-of-type(1) .name-num {
          margin-top: 2px;
        }
        overflow: auto;
        height: 850px;
        .name-num {
          margin: 0 auto;
          cursor: pointer;
          height: 76px;
          width: 80%;
          background-color: rgba(255, 255, 255, 0.04);
          /*box-shadow: -5px 0px 0px 0px rgba(34, 86, 206, 0.7), -3px 0px 0px 0px rgba(19, 63, 189, 0.58), 0px 2px 0px 0px rgba(34, 86, 206, 0.7);*/
          box-shadow: 0px -2px 0px 0px rgba(100,147,255,0.7), -4px 0px 0px 0px rgba(100,147,255,0.58), 0px 2px 0px 0px rgba(100,147,255,0.7);
          opacity: 0.4;
          color: rgba(255, 255, 255, 1);
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-top: 20px;
          border-radius: 10px;

          span {
            font-size: 18px;
          }

          span:nth-of-type(2) {
            font-size: 20px;

            em {
              font-style: normal;
              font-size: 12px;
              font-weight: lighter;
            }
          }
        }

        /*点击激活的类名*/
        .activeClass {
          width: 100%;
          height: 110px;
          -webkit-border-radius: 0;
          -moz-border-radius: 0;
          border-radius: 0;
          background: rgba(19, 63, 189, 1);
          opacity: 1;
          box-shadow: none;
          color: #fff;
          span {
            /*color: #7a8bd3;*/
            font-size: 26px;
          }

          span:nth-of-type(2) {
            font-size: 26px;

            em {
              font-style: normal;
              font-size: 12px;
              font-weight: lighter;
            }
          }
        }

        /* 为被激活时的类名*/
        .unActiveClass {
          color: #7a8bd3;
        }
        /*下拉*/
        .sub-list {
          .sub-item {
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 80%;
            height: 60px;
            cursor: pointer;
            /*background: #3b69d4;*/
            background: rgba(185, 201, 247, .21);
            color: rgba(255, 255, 255, 0.5);

            span {
              font-size: 14px;
            }

            span:nth-of-type(2) {
              font-size: 18px;
              font-weight: 600;

              em {
                font-style: normal;
                font-size: 12px;
                font-weight: lighter;
              }
            }
          }

          .activeChildClass {
            cursor: pointer;
            background: #fff;
            color: #133FBD;
            /*font-size: 20px;*/
            span {
              font-size: 20px;
            }

            span:nth-of-type(2) {
              font-size: 20px;
              /*font-weight: 600;*/
              em {
                font-style: normal;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
    .workshop-rt {
      flex: 1;
      -ms-flex: 1;
      display: flex;
      display: -ms-flexbox;
      /*height: 100%;*/
      flex-direction: column;
      -ms-flex-direction: column;
      .work-energy-trend {
        padding: 0 50px;
        @include head-title(40px, 20px, rgba(20, 202, 255, 1), rgba(20, 202, 255, 1), 24px);
        flex: 1;
        -ms-flex: 1;
        background: $sbgc;
        .trendChart {
          width: 1304px;
          height: 500px;
          margin: 0 auto;
        }
      }
      .work-bottom {
        margin-top: 20px;
        flex: 0 0 30%;
        -ms-flex: 0 0 30%;
        display: flex;
        .work-past-com {
          @include head-title(20px, 14px, rgba(20, 202, 255, 1), rgba(20, 202, 255, 1), 20px);
          background: $sbgc;
          flex: 0 0 38%;
          margin-right: 20px;
          .work-past {
            width: 510px;
            height: 240px;
            margin: 0 auto;
          }
        }
        .work-rank {
          @include head-title(20px, 14px, rgba(20, 202, 255, 1), rgba(20, 202, 255, 1), 20px);
          background: $sbgc;
          flex: 1;
          .rank-content {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 82%;
            .rank-situation {
              text-align: center;
              .icon-img {
                display: inline-block;
                vertical-align:middle; // 图片跟文字在同一水平上
                width: 16px;
                height: 16px;
                margin-right: 8px
              }
              div {
                color: #fff;
                span {
                  font-size: 16px;
                }
                p {
                  margin: 18px 0 10px;
                  font-size: 20px;
                }
              }
            }
            .rankPie {
              width: 330px;
              height: 100%;
              margin: 0 15px;
              .rankPieChart {
                width: 300px;
                height: 250px;
                margin: 0 auto;
              }
            }

            .gross {
              color: #fff;
              /*flex: 0 0 30%;*/
              .sele-value {
                font-size: 20px;
                color: #fff;
                text-align: center;
                /*padding-bottom: 20px;*/
                /*border: 1px solid #2d8cf0;*/
                margin-bottom: 20px;
                span{
                  font-size: 12px;
                  color: rgba(255, 255, 255, 0.8);
                }
              }
              .rank-big-num {
                font-size: 40px;
                text-align: center;
                .per-color {
                  /*color: #0ea592;*/
                  em{
                    font-size: 12px;
                    font-style: normal;
                    font-weight: lighter;
                  }
                }
                .num-line {
                  height: 1px;
                  background: rgba(255, 255, 255, 0.5);
                  margin-bottom: 4px;
                }
                /*&:after {*/
                /*  content: '';*/
                /*  display: block;*/
                /*  !*width: 42%;*!*/
                /*  height: 1px;*/
                /*  background: #fff;*/
                /*  margin: 10px 0;*/
                /*}*/
                .rank-text {
                  font-size: 18px;
                  /*padding-left: 10px;*/
                }
              }
            }
          }
        }
      }
    }
  }
</style>
